<template>
    <el-card shadow="always">
        <!-- 顶部标题 -->
        <div class="chart-title">
            <!-- 具名插槽 -->
            <slot name="chart-title"></slot>
        </div>
        <!-- 展示用户数字 -->
      <div class="chart-number">
        <slot name="chart-number"></slot>
      </div>
      <!-- 展示图形图标位置 -->
    <div class="charts">
        <slot name="charts"></slot>
      </div>
      <!-- 底部 -->
    <div class="chart-footer">
        <slot name="chart-footer"></slot>
      </div>
    </el-card>
    
</template>

<script setup lang="ts">

</script>

<style scoped>
/**顶部标题的样式**/
.chart-title {
    font-size: 12px;
    color: #bbb;
  }
  /**用户数字的样式**/
  .chart-number {
    font-size: 25px;
    font-weight: 700;
    margin: 2px 0px;
  }
  .charts {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #ccc;
  }
  .chart-footer {
    margin-top: 10px;
    font-size: 12px;
    color: #bbb;
      }
</style>